<template>
  <!-- 确认订单 -->
  <view class="" :style="[pageStyle]">
    <tohome />
    <view class="screen" style="height: 100vh">
      <view class="" style="position: relative">
        <view id="map" style="height: 40vh; width: 100%" />
        <image
          @tap="showGoBackHandle"
          :src="getImgSrc('/address/map_back.png')"
          style="
            width: 56rpx;
            height: 56rpx;
            position: absolute;
            left: 30rpx;
            margin-top: -37px;
          "
          :style="'top:' + vuex_phoneLayout.screenPaddingTop + 'px'"
        />
      </view>
      <scroll-view scroll-y="true" class="content">
        <view class="content_address">
          <view class="content_address_item" v-if="vuex_sendOrGet !== 'get'">
            <view class="content_address_tips"> 取 </view>
            <view class="content_address_text">
              <view class="content_address_text_txt1">
                {{ vuex_myAddress.address }}
              </view>
              <view class="content_address_text_txt2">
                {{ vuex_myAddress.name + " " + vuex_myAddress.mobile }}
              </view>
            </view>
          </view>
          <view class="content_address_item">
            <view class="content_address_tips address_tips1">
              {{ vuex_sendOrGet == "get" ? "取" : "终" }}
            </view>
            <view class="content_address_text">
              <view class="content_address_text_txt1">
                {{ vuex_site.schoolName }}
              </view>
              <view class="content_address_text_txt2">
                {{ vuex_site.name }}
              </view>
            </view>
          </view>
          <view class="content_address_item" v-if="vuex_sendOrGet == 'get'">
            <view class="content_address_tips"> 收 </view>
            <view class="content_address_text">
              <view class="content_address_text_txt1">
                {{ vuex_myAddress.address }}
              </view>
              <view class="content_address_text_txt2">
                {{ vuex_myAddress.name + " " + vuex_myAddress.mobile }}
              </view>
            </view>
          </view>
        </view>
        <view class="content_cell">
          <view class="content_cell_item" v-if="vuex_sendOrGet == 'send'">
            <view class="content_cell_item_left"> 是否需要寄件 </view>
            <view class="content_cell_item_right">
              <u-switch
                v-model="deliveryFlg"
                asyncChange
                @change="asyncChange"
              ></u-switch>
              <!-- <text class="content_cell_item_right_txt txt_red">是否需要寄件</text> -->
              <!-- <image :src="getImgSrc('/home/icon_right.png')" style="height: 30rpx;" mode="heightFix"></image> -->
            </view>
          </view>
          <view
            class="content_cell_item"
            v-if="vuex_sendOrGet == 'send' && deliveryFlg"
            @tap="kuaidiShow = true"
          >
            <view class="content_cell_item_left"> 指定快递公司 </view>
            <view class="content_cell_item_right">
              <text class="content_cell_item_right_txt">{{
                kuaidi.value ? kuaidi.value : "请选择快递公司"
              }}</text>
              <image
                :src="getImgSrc('/home/icon_right.png')"
                style="height: 30rpx; width: 30rpx"
                mode="heightFix"
              ></image>
            </view>
          </view>
          <view class="content_cell_item">
            <view class="content_cell_item_left"> 任务/难度系数（kg） </view>
            <view class="content_cell_item_right" @tap="gotoProMes">
              <text class="content_cell_item_right_txt"
                >{{
                  (vuex_goodTypeList.length > 0
                    ? vuex_goodTypeList[0].value
                    : "--") +
                  " / " +
                  vuex_kg 
                }}
              </text>
              <image
                :src="getImgSrc('/home/icon_right.png')"
                style="height: 30rpx; width: 30rpx"
                mode="heightFix"
              ></image>
            </view>
          </view>
          <view class="content_cell_item" @tap="gotoProMes">
            <view class="content_cell_item_left"> 备注 </view>
            <view class="content_cell_item_right">
              <text class="content_cell_item_right_txt">{{ vuex_remark }}</text>
            </view>
          </view>
          <view class="content_cell_item" @tap="timeShow = true">
            <view class="content_cell_item_left"> 预约截止 </view>
            <view class="content_cell_item_right">
              <text class="content_cell_item_right_txt">{{
                requestedTime
              }}</text>
              <image
                :src="getImgSrc('/home/icon_right.png')"
                style="height: 30rpx; width: 30rpx"
                mode="heightFix"
              ></image>
            </view>
          </view>
          <view class="content_cell_item" @tap="changePayType">
            <view class="content_cell_item_left"> 支付方式 </view>
            <view class="content_cell_item_right">
              <text class="content_cell_item_right_txt">微信支付</text>
              <image
                :src="getImgSrc('/home/icon_right.png')"
                style="height: 30rpx; width: 30rpx"
                mode="heightFix"
              ></image>
            </view>
          </view>
          <view class="content_cell_item" v-if="vuex_sendOrGet == 'get'">
            <view class="content_cell_item_left"> 取件码/确认码 </view>
            <view class="content_cell_item_right">
              <text class="content_cell_item_right_txt">{{ vuex_code }}</text>
            </view>
          </view>
          <view class="content_cell_item" @tap="tipShow = true">
            <!-- <view class="content_cell_item_left"> 是否加急、加小费 </view> -->
            <view class="content_cell_item_left"> 奖金/津贴 </view>
            <view class="content_cell_item_right">
              <text class="content_cell_item_right_txt">{{
                hasTip ? "是" : "否"
              }}</text>
              <image
                :src="getImgSrc('/home/icon_right.png')"
                style="height: 30rpx; width: 30rpx"
                mode="heightFix"
              ></image>
            </view>
          </view>
          <!-- <view class="content_cell_item" @tap="goToOrderCouponList">
						<view class="content_cell_item_left">
							使用优惠券
						</view>
						<view class="content_cell_item_right">
							<text class="content_cell_item_right_txt txt_red">-¥0</text>
							<image :src="getImgSrc('/home/icon_right.png')" style="height: 30rpx;width: 30rpx;" mode="heightFix"></image>
						</view>
					</view> -->
        </view>
        <view class="bottom_view">
          <view class="price" @tap="showDetailHandle">
            <view class="price_mes">
              <text class="price_mes_text1">￥</text>
              <text class="price_mes_text2">{{ priceCalcDetal.price }}</text>
              <text class="price_mes_text3">详细价格</text>
              <image
                :src="getImgSrc('/address/icon_up@2x.png')"
                style="width: 30rpx; height: 30rpx"
                mode="widthFix"
              ></image>
            </view>
            <!-- <view class="price_discount">
							已优惠 <text style="color: #BA200C;">xx</text> 元
						</view> -->
          </view>
          <view class="pay_btn">
            <view class="default-button" @tap="createOrder">确认支付</view>
          </view>
        </view>
      </scroll-view>
      <view
        class="screen-bottomFill"
        style="opacity: 1"
        :style="'height:' + vuex_phoneLayout.ipxbottom + 'px;'"
      >
        <!-- 用来填充导航 和 底部的多余 -->
      </view>
    </view>
    <!-- 取消弹窗 -->
    <u-popup v-model="cancelShow" mode="center" @close="cancelShow = false">
      <view class="cancel_pop">
        <view class="cancel_title"> 温馨提示 </view>
        <view class="cancel_text"> 你确定要取消发单吗？ </view>
        <view class="cancel_btn">
          <view class="default-button cancel-button" @tap="goToBack">
            取消发单
          </view>
          <view class="default-button" @tap="cancelShow = false">
            继续发单
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 价格详情弹窗 -->
    <u-popup v-model="detailShow" mode="bottom" @close="detailShow = false">
      <view class="price_detail">
        <view class="price_detail_title">
          <view class="price_detail_title_txt">
            <text class="">赏金明细</text>
            <image
              @tap="gotoRule"
              :src="getImgSrc('/address/icon_explain@2x.png')"
              style="width: 36rpx; height: 36rpx; margin-left: 10rpx"
              mode="widthFix"
            ></image>
          </view>
          <image
            :src="getImgSrc('/address/icon_close@2x.png')"
            @tap="detailShow = false"
            style="width: 40rpx; height: 40rpx"
            mode="widthFix"
          ></image>
        </view>
        <view class="price_detail_list">
          <template v-if="priceCalcDetal.priceDetailList">
            <view
              class="price_detail_item"
              v-for="(item,index) in priceCalcDetal.priceDetailList"
              :key="item.id"
            >
              <!-- <text>{{ item.name }}</text> -->
							<text>{{feeName[item.name]}}</text>
              <text class="right_text">{{ item.price }} 元</text>
            </view>
          </template>

          <!-- <view class="price_detail_item">
						<text>里程费（8.8公里）</text>
						<text class="right_text">10 元</text>
					</view>
					<view class="price_detail_item">
						<text>续重费（9KG）</text>
						<text class="right_text">10 元</text>
					</view>
					<view class="price_detail_item">
						<text>加急费</text>
						<text class="right_text">10 元</text>
					</view>
					<view class="price_detail_item">
						<text>服务费</text>
						<text class="right_text">10 元</text>
					</view>
					<view class="price_detail_item">
						<text>优惠券</text>
						<text class="right_text">-10 元</text>
					</view> -->
        </view>
        <view class="price_detail_bottom">
          合计金额：<text style="font-size: 46rpx">{{
            priceCalcDetal.price
          }}</text
          >元
        </view>
      </view>
    </u-popup>
    <!-- 选择快递 -->
    <u-popup v-model="kuaidiShow" mode="bottom" @close="kuaidiShow = false">
      <view
        style="width: 100vw; background: #ffffff; padding-top: 10rpx"
        :style="'padding-bottom:' + vuex_phoneLayout.ipxbottom + 'px;'"
      >
        <!-- <view class="search" style="background: #FFFFFF;">
					<u-search v-model="keywords" @custom="search" @search="search" ></u-search>
				</view> -->
        <scroll-view scroll-y style="height: 40vh">
          <view v-if="kuaidiList.length">
            <view
              class="site_item"
              v-for="(item, index) in kuaidiList"
              :key="index"
              @tap="selectKuaidi(item)"
            >
              <view class="place_text1">
                <text>{{ item.value }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <!-- 消费弹窗 -->
    <u-popup v-model="tipShow" mode="bottom" @close="tipShow = false">
      <view class="tip">
        <view class="tip_title">
          <view class="tip_left_txt">
            <text class="">奖金/津贴</text>
          </view>
          <image
            :src="getImgSrc('/address/icon_close@2x.png')"
            @tap="tipShow = false"
            style="width: 40rpx; height: 40rpx"
            mode="widthFix"
          ></image>
        </view>
        <view class="tip_item">
          <view class="tip_left_txt">
            <!-- <text>加急</text> -->
            <text
              style="
                font-size: 28rpx;
                color: #4b4b4b;
                font-weight: 0;
                margin-left: 13rpx;
              "
              >为时间付费，为才能买单</text
            >
          </view>
          <view class="">
            <u-switch v-model="hasTip" @change="tipSwitchChange"></u-switch>
          </view>
        </view>
        <view class="tip_bottom">
          <view class="tip-number-box">
            <u-number-box
              :disabledInput="!hasTip"
              :disabled="!hasTip"
              inputWidth="200"
              inputHeight="80"
              v-model="tip"
              @change="tipValChange"
            ></u-number-box>
            元
          </view>
          <view class="tip-btn">
            <view class="default-button" @click="tipConfirm"> 确定 </view>
          </view>
        </view>
      </view>
    </u-popup>
    <time-piceker v-model="timeShow" mode="time" @confirm="pickerChange">
    </time-piceker>
  </view>
</template>
<script>
import timePiceker from "@/components/timePicker/time-picker.vue";
import { formatDate } from "@/common/util.js";
import AMapLoader from "@amap/amap-jsapi-loader";
import moment from "moment";
const generatorMarker = (lon, lat, msg) =>
  new AMap.LabelMarker({
    position: [lon, lat],
    opacity: 1,
    zIndex: 99,
    icon: {
      image: "/web/xcx/static/aidex/images/dingwei.png",
      anchor: "bottom-center",
      size: [25, 25],
    },
    text: {
      content: msg,
      direction: "top",
      style: {
        fontSize: 15,
        fillColor: "#666",
        padding: [3, 10],
        backgroundColor: "#fff",
        borderColor: "#eaeaea",
        borderWidth: 1,
      },
    },
  });
export default {
  components: {
    timePiceker,
  },
  data() {
    return {
      // serviceType 0送1收
      timeShow: false,
      cancelShow: false,
      detailShow: false,
      tipShow: false,
      isSend: this.vuex_sendOrGet == "get" ? false : true,
      deliveryFlg: false, // 是否需要寄件
      tip: 1,
      hasTip: true,
      requestedTime: moment().add(1, "hour").format('YYYY-MM-DD HH:00:00'),
      priceCalcDetal: {},
      payParams: null,
      kuaidiShow: false,
      orderId: "",
      kuaidi: {
        value: "",
        key: "",
      },
      kuaidiList: [],
      labelsLayer: null,
      map: null,
			feeName:{
				'服务费':'服务费', 
				'加急费':'任务赏金/奖金', 
				'任务赏金':'基础赏金'
			}
    };
  },
  onLoad(option) {
    this.phoneNo = option.phoneNo;
    this.initMap().then(this.updateMarker);

    const _this = this;
    this.$bridge.registerHandler(
      "triggerToAfterPay",
      (data, responseCallback) => {
        responseCallback(data);
        uni.reLaunch({
          url: "/pages/sys/cuser/order-detail?orderId=" + _this.orderId,
        });
      }
    );
  },
  onShow() {
    if (this.orderId) {
      uni.reLaunch({
        url: "/pages/sys/cuser/order-detail?orderId=" + _this.orderId,
      });
      return;
    }
    var pages = getCurrentPages();
    var prevPage = pages[pages.length - 1];
    this.kuaidiList = this.vuex_logistics;
    this.kuaidi = this.kuaidiList[0];
    this.calcPriceHandle();
  },
  watch: {},
  computed: {
    pageStyle() {
      return {
        background: "#fff",
        "padding-top": `${this.vuex_safeArea.top}px`,
        "padding-bottom": `${this.vuex_safeArea.bottom}px`,
      };
    },
  },
  methods: {
    updateMarker(map) {
      let Lat;
      let Lon;
      let Msg;
      const addrInfo = this.vuex_myAddress || {};
      if (this.vuex_sendOrGet === "send") {
        Lat = addrInfo.lat;
        Lon = addrInfo.lon;
        Msg = "取：" + addrInfo.address;
      } else {
        Lat = addrInfo.lat;
        Lon = addrInfo.lon;
        Msg = "收： " + addrInfo.address;
      }
      if (this.labelsLayer) {
        map.remove(this.labelsLayer);
        this.labelsLayer = null;
      }
      const marker = generatorMarker(Lon, Lat, Msg);
      this.labelsLayer = new AMap.LabelsLayer({
        collision: true,
      });

      this.labelsLayer.add(marker);
      map.add(this.labelsLayer);
    },
    initMap() {
      const lat = this.vuex_myAddress.lat;
      const lon = this.vuex_myAddress.lon;
      if (this.map) {
        this.map.setCenter([lon, lat]);
        return Promise.resolve();
      }
      return new Promise((res, rej) => {
        AMapLoader.load({
          key: "2d01e5cd2e390a130fd215d4014594fa", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          AMapUI: {
            // 是否加载 AMapUI，缺省不加载
            version: "1.1", // AMapUI 版本
            plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件
          },
          Loca: {
            // 是否加载 Loca， 缺省不加载
            version: "2.0", // Loca 版本
          },
        }).then((AMap) => {
          self.map = new AMap.Map("map", {
            zoom: 17, //初始化地图级别
            center: lon ? [lon, lat] : undefined,
          });
          self.map.on("complete", function () {
            console.log(
              "地图图块加载完毕！当前地图中心点为：" + self.map.getCenter()
            );
            res(self.map);
          });
        }, rej);
      });
    },
    selectKuaidi(e) {
      this.kuaidi = e;
      this.kuaidiShow = false;
    },
    changePayType() {
      // 选择支付方式
      this.$u.toast("微信支付");
    },
    pickerChange(e) {
      // 选择取件时间
			let t
			if(e.hour !== '立即发布') {
				t = formatDate(e.timestamp)
			}else {
				t = e.hour
			}
			console.log(e)
			console.log(t)
			this.requestedTime = t
      // this.requestedTime = formatDate(e.timestamp);
    },
    createOrder() {
      if (this.orderId) {
        uni.showToast({
          title: "请不要重复创建订单，即将跳转到订单详情",
          icon: "none",
        });
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/sys/cuser/order-detail?orderId=" + this.orderId,
          });
        }, 1500);
        return;
      }
      // 创建订单
      let goodTypeList_int = [];
      this.vuex_goodTypeList.map((item) => {
        goodTypeList_int.push(parseInt(item.key));
      });
      let pa = {
        addrId: this.vuex_myAddress.id,
        code: this.vuex_code,
        couponId: "",
        goodTypeList: goodTypeList_int,
        isAdditional: this.hasTip ? 1 : 0,
        kg: this.vuex_kg,
        openId: this.vuex_openId,
        payType: 1,
        remark: this.vuex_remark,
        requestedFlg: 0, //是否立即
        requestedTime: this.requestedTime, //约定时间
        serviceType: this.vuex_sendOrGet == "get" ? 1 : 0, //0送1收
        siteId: this.vuex_site.id,
        tip: this.hasTip ? this.tip : 0,
        deliveryFlg: this.deliveryFlg ? 1 : 0,
        logisticsId: this.kuaidi.key,
        logisticsName: this.kuaidi.value,
        logisticsFlg: this.kuaidi.key === "" ? 0 : 1,
      };
			if(this.requestedTime=='立即发布') {
				pa.requestedFlg = 1
				pa.requestedTime = ''
			}else {
				pa.requestedFlg = 0
				pa.requestedTime = this.requestedTime
			}
      uni.showLoading();
      this.$u.api
        .addAppOrder(pa)
        .then((res) => {
          if (res.code == "200") {
            this.orderId = res.data.orderNo;
            this.orderParams = res.data;
            this.wxPrePay();
          } else {
            this.$u.toast(res.message);
          }
        })
        .then((res) => {
          uni.hideLoading();
        });
    },
    async wxPrePay() {
      if (this.orderParams.flg === 0) {
        uni.navigateTo({
          url: "/pages/sys/cuser/order-detail?orderId=" + this.orderId,
        });
        return;
      }

      if (!this.orderId) {
        uni.showToast({ title: "无效订单号", icon: "none" });
        return;
      }
      const res = await this.$u.api.appOrderPay({ orderId: this.orderId });
      if (!res || res.code !== 200) {
        uni.showToast({ title: res.message || "操作失败", icon: "none" });
        return;
      }
      this.payParams = res.data;
      this.wxPayment();
    },
    async wxPayment() {
      this.$bridge.callHandler(
        "triggerToPay",
        JSON.stringify(this.payParams),
        (args) => {}
      );
    },
    calcPriceHandle() {
      // 计算价格接口
      let pa = {
        couponId: "",
        isAdditional: this.hasTip ? 1 : 0,
        addrId: this.vuex_myAddress.id,
        kg: this.vuex_kg,
        serviceType: this.vuex_sendOrGet == "get" ? 1 : 0,
        siteId: this.vuex_site.id,
        tip: this.hasTip ? this.tip : 0,
      };
      this.$u.api.calcPrice(pa).then((res) => {
        if (res.code == "200") {
          this.priceCalcDetal = res.data;
        } else {
          this.$u.toast(res.message);
        }
      });
    },
    goToOrderCouponList() {
      uni.navigateTo({
        url: "/pages/sys/cuser/orderCouponList",
      });
    },
    gotoRule() {
      uni.navigateTo({
        url: "/pages/sys/cuser/calcRule",
      });
    },
    tipConfirm() {
      // 小费确认
      this.tipShow = false;
      this.calcPriceHandle();
    },
    tipSwitchChange(e) {
      // 小费开关
      this.hasTip = e;
      if (!e) {
        this.tip = 1;
      }
    },
    tipValChange(e) {
      console.log("当前值为: " + e.value);
    },
    showDetailHandle() {
      // 费用详情
      this.detailShow = true;
    },
    showGoBackHandle() {
      // 是否返回弹窗
      this.cancelShow = true;
    },
    goToBack() {
      // 返回
      uni.navigateBack();
    },
    asyncChange(e) {
      // 是否寄件开关
      this.isSend = e;
      /* uni.showModal({
					content: e ? '确定要打开吗' : '确定要关闭吗',
					success: (res) => {
						if (res.confirm) {
							this.isSend = e
						}else {
							this.isSend = !e
						}
					}
				}) */
    },
    gotoProMes() {
      uni.navigateTo({
        url: "/pages/sys/cuser/proMes",
      });
    },
    gotoPaySuccess() {
      uni.navigateTo({
        url:
          "/pages/sys/cuser/paySuccess?payPrice=" + this.priceCalcDetal.price,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "index.scss";
.content {
  height: calc(60vh + 50rpx);
  width: 100%;
  position: relative;
  z-index: 999;
  border-radius: 42rpx;
  margin-top: -50rpx;
  background: #ffffff;
  position: relative;
  padding: 0 30rpx 0;
  box-sizing: border-box;
}
.content_address {
  margin-top: 50rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #eaeaea;
}
.content_address_item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 50rpx;
}
.content_address_tips {
  width: 44rpx;
  height: 44rpx;
  font-size: 26rpx;
  border-radius: 8rpx;
  background: #4e95fc;
  line-height: 44rpx;
  text-align: center;
  color: #ffffff;
  margin-right: 30rpx;
}
.content_address_tips.address_tips1 {
  background: #ffca3b;
}
.content_address_text_txt1 {
  font-size: 34rpx;
  color: #282828;
  font-weight: 800;
}
.content_address_text_txt2 {
  font-size: 26;
  color: #4b4b4b;
}
.content_cell_item {
  width: 100%;
  min-height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #eaeaea;
}
.content_cell_item_left {
  font-size: 28rpx;
  color: #4b4b4b;
}
.content_cell_item_right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.content_cell_item_right_txt {
  margin-right: 28rpx;
  color: #282828;
  font-weight: 800;
  max-width: 300rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.txt_red {
  color: #ee3b32;
}
.bottom_view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0 70rpx;
}
.pay_btn {
  width: 250rpx;
  .default-button {
    margin: 0;
  }
}
.price_mes {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.price_mes {
}
.price_mes_text1 {
  font-size: 32rpx;
  color: #ee3b32;
  font-weight: 800;
}
.price_mes_text2 {
  font-size: 48rpx;
  color: #ee3b32;
  font-weight: 800;
  line-height: 1;
  margin-right: 20rpx;
}
.price_mes_text3 {
  font-size: 26rpx;
  color: #4b4b4b;
  margin-right: 10rpx;
}
.price_discount {
  color: #b5b5b5;
  font-size: 26rpx;
  margin-top: 16rpx;
}
.cancel_pop {
  padding: 60rpx 0;
  width: 84vw;
  text-align: center;
  background: #ffffff;
  border-radius: 20rpx;
}
.cancel_title {
  color: #282828;
  font-size: 38rpx;
  font-weight: bold;
  margin-bottom: 37rpx;
}
.cancel_text {
  color: #4b4b4b;
  font-size: 32rpx;
  margin-bottom: 68rpx;
}
.cancel_btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20rpx;
  .default-button {
    width: 45%;
    margin: 0;
    font-size: 34rpx;
  }
  .cancel-button {
    background: #ffffff;
    color: #4b4b4b;
    box-shadow: none;
    border: 1px solid #e8e8e8;
  }
}

.price_detail {
  padding: 48rpx 40rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  .price_detail_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 34rpx;
    color: #282828;
    font-weight: 800;
    margin-bottom: 50rpx;
    .price_detail_title_txt {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  .price_detail_item {
    padding: 18rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #4b4b4b;
    font-weight: 400;
    .right_text {
      color: #282828;
      font-weight: 600;
    }
  }
  .price_detail_bottom {
    font-size: 30rpx;
    color: #4b4b4b;
    text-align: right;
    margin: 80rpx 0 20rpx;
    font-weight: 800;
  }
}

.tip {
  padding: 48rpx 40rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  .tip_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 34rpx;
    color: #282828;
    font-weight: 800;
    margin-bottom: 50rpx;
  }
  .tip_left_txt {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .tip_item {
    padding: 18rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 34rpx;
    color: #282828;
    font-weight: 800;
  }
  .tip_bottom {
    padding: 70rpx 0;
    text-align: center;
  }
  .tip-btn {
    width: 76%;
    margin: 44rpx auto 0;
    .default-button {
      margin: 0;
    }
  }
}

.place_text1 {
  color: #282828;
  font-size: 34rpx;
  font-weight: 800;
  margin-bottom: 16rpx;
}
.place_text2 {
  color: #899aaf;
  font-size: 28rpx;
  min-width: 200rpx;
}

.site_item {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #ddd;
}
</style>
